<!--
 * 运动
 * @Author: John Trump
 * @Date: 2020-07-15 11:43:10
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-15 14:59:01
 * @FilePath: /src/views/sport/index.vue
-->
<template>
  <div>
    <Robot :robotsay="Rsay"></Robot>
    <div class="main">
      <div class="item">
        <circular-progress :percent="10" color="#33cb98" data="14/90" unit="分钟" />
        <h1>
          <img src="../../assets/images/color_icon_clock.png" />
          运动分钟数
        </h1>
      </div>
      <div class="item">
        <circular-progress :percent="10" color="#ff8a79" data="678" unit="卡路里" />
        <h1>
          <img src="../../assets/images/color_icon_foot.png" />
          今日步数
        </h1>
      </div>
      <div class="item">
        <circular-progress :percent="10" color="#ff8a79" data="678" unit="卡路里" />
        <h1>
          <img src="../../assets/images/color_icon_flash_2.png" />
          消耗卡路里
        </h1>
      </div>
    </div>
    <BasicLayout></BasicLayout>
  </div>
</template>

<script>
import CircularProgress from "../../components/CircularProgress";
import Robot from "../../components/Robot";
import BasicLayout from "../../components/BasicLayout";
export default {
   data() {
    return {
      Rsay:'您今天运动了么，可以对我说说噢。'
    };
  },
  components: {
    CircularProgress,
    BasicLayout,
    Robot
  }
};
</script>

<style lang="less" scoped>
.main {
  width: 92%;
  margin-top: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  .item {
    margin: 0 auto;
    img {
      width: 45px;
      height: 45px;
      margin-right: 20px;
    }
    h1 {
      display: flex;
      align-items: center;
      font-size: 50px;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
